import React  from 'react';
import { withRouter} from 'react-router-dom';
import { List} from 'weaver-mobile';
import {CommonText} from '../comText/text';
const commonText = new CommonText();
const { FormItem } = List;

/*
 * @info: 重写状态组件
 * @Author: lusx
 * @Date: 2019-12-01 11:13:16
 * @Last Modified by:   lusx
 * @Last Modified time: 2019-01-31 11:13:16
 */
@withRouter
export default class Status extends React.Component {
  constructor(props) {
    super(props);
    this.state={
      status: '',
      color:'',
      key:''
    };
    this.statusObj = [
      {"text":commonText.NOSTARTED,"color":"#ff9000","key":"0"},//未开始 0
      {"text":commonText.PROCESSING,"color":"#2db7f5","key":"1"},//进行中 1
      {"text":commonText.OVERDUE,"color":"#f50","key":"2"},//已超期 2
      {"text":commonText.COMPLETED,"color":"#87d068","key":"3"},//已完成 3
      {"text":commonText.ABANDON,"color":"#c7bfbc","key":"4"}//已废弃 4
    ];
  }
  componentDidMount(){
    // console.log("this.props.field--",this.props.field)
    // const {value} = this.props.field;
    // this.setState({
    //   status:this.statusObj[value].text,
    //   color:this.statusObj[value].color,
    //   key:this.statusObj[value].key
    // })
    //#812960 概述：解决督办手机端查看详情页面空白的问题 原因,后端改了代码
    let key = "";
    this.props.field.options.forEach(o=>{
      if(o.selected === true) key = o.key;
    })
    this.setState({
      status:this.statusObj[key].text,
      color:this.statusObj[key].color,
      key:this.statusObj[key].key
    })
  }
  componentWillUpdate(nextProps, nextState){
    if(nextProps.field.value !== this.props.field.value){
        const {value} = nextProps.field;
        this.setState({
          status:this.statusObj[value].text,
          color:this.statusObj[value].color,
          key:this.statusObj[value].key
        })
    }
  }
  render() {
    const {label} = this.props.field;
    const {status,color,key} = this.state;
    return(
      <div className="g-status">
        <FormItem
            label={label}
            content={(
              <StatusItem  status={status} color={color} key={key}/>
            )}
            line={true}
        />

      </div>
    );
  }
}

function StatusItem (props) {
  return (
    <div className='g-statusItem' style={{color:props.color}}>
      {props.status}
    </div>
  );
}
